<!-- 业务派单功能 -->
<template>
  <el-container class="electronicSignature">
    <!-- 派单项目添加弹框 -->
    <el-dialog
      ref="DialogRef"
      v-dialogDrag
      :close-on-click-modal="false"
      title="派单项目添加"
      :visible.sync="sendOrdersDialogVisible"
      width="80%"
      height="100%"
      modal
      class="pms-dialog"
      :before-close="handleColse"
      style="text-align:center"
    >
      <iframe id="ItemQuery" ref="ItemQuery" style="width:100%;min-height: 350px;" scrolling="no" frameborder="0" :src="ItemQuerySrc" />
      <div slot="footer" class="dialog-footer">
        <el-button class="pms-button-primary" size="small" @click="pushAdd">确 定</el-button>
        <el-button class="pms-button" size="small" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
    export default {
        name: 'BusinessOrderPush',
        components: {
        },
        props: {
          tableDataOld: {
            type: Array,
            default: () => ([])
            }
        },
        data() {
            return {
                jnOuterNet: process.env.VUE_APP_JUNNAN_IFRAME_URL,
                sendOrdersDialogVisible: false,
                ItemQuerySrc: '' // 项目查询公共能力页面地址
            }
        },
        mounted() {
          // this.ifmCre()
          window.addEventListener('message', function(event) {
            const base_url = ''
              if (event.origin === base_url) {
                return
              }
            console.log(event, 'window.addEventListener')
            const listenerData = event.data
            if (listenerData.type === 'newHeight') {
              const newHeight = listenerData.data + 24
              document.getElementById('ItemQuery').style.height = newHeight + 'px'
            }
            if (listenerData.type === 'selectData') {
              sessionStorage.setItem('pmsGetSelectData', JSON.stringify(listenerData.data))
            }
          })
        },
        methods: {
            // 添加
            ifmCre() {
              const manageModeVal = ['00', '01', '21', '32', '04', '41']
              const newTime = Date.now()
              this.ItemQuerySrc = `${this.jnOuterNet}prjQueryAndExport/prjQueryList?manageMode=${manageModeVal.join(',')}&newTime=${newTime}`
              console.log('this.ItemQuerySrc', this.ItemQuerySrc)
              this.sendOrdersDialogVisible = true
            },
            // 添加确认
            pushAdd() {
              const selectData = JSON.parse(sessionStorage.getItem('pmsGetSelectData'))
              const selectDataPush = []
              const selectDataNoPush = []
              for (let i = 0; i < selectData.length; i++) {
                  let isExist = false
                  for (let j = 0; j < this.tableDataOld.length; j++) {
                    if (selectData[i].prjId === this.tableDataOld[j].prjId) {
                      isExist = true
                      break
                      }
                  }
                  if (!isExist) {
                    selectDataPush.push(selectData[i].prjId)
                  } else {
                    selectDataNoPush.push(selectData[i].prjCode)
                  }
              }
              if (selectDataNoPush.length >= 1) {
                  this.$message.info({ dangerouslyUseHTMLString: true, message: `以下项目编码已存在派单项目列表中:<br/><br/>${selectDataNoPush.join(',')}<br/>` })
                  return
              }
              if (selectDataPush.length < 1) {
                  this.$message.info('暂无可添加数据')
                  return
              }
              this.$emit('update-value', selectDataPush)
              this.handleColse()
            },
            // 添加取消
            cancel() {
              this.handleColse()
            },
            handleColse() {
              sessionStorage.setItem('pmsGetSelectData', JSON.stringify([]))
              this.sendOrdersDialogVisible = false
            }
        }
    }
</script>

<style lang="scss" scoped>
  .search-flex-box {
      display: flex;
      justify-content: space-between;
      height: auto;
  }
  .searchBtn {
      width: 100px;
      margin-left: auto;
      display: flex;
      margin-top: 0px;
      flex-direction: column;
      .el-button + .el-button {
          margin-left: 0;
          margin-top: 8px;
      }
  }

  .electronicSignature {
      width: 100%;
      .mainDetails {
          padding: 20px 25px 0px;
      }
      .topRemark {
          // background-color: #fdf5e6;
          background-color: #ffefd5;
          width: 100%;
          height: 40px;
          line-height: 40px;
          padding-left: 10px;
          font-size: 14px;

          .asterisk {
              color: #f00;
              margin-right: 2px;
              font-size: 18px;
          }
      }

      .customBtn {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          margin: 10px 20px 10px 90%;
          cursor: pointer;

          .el-icon-s-tools {
              font-size: 20px;
              color: #999;
              margin-right: 6px;
          }
      }
  }

  .el-button--text {
      color: #02A7F0;
  }

  .el-button--primary {
      color: #fff;
  }
  .dialog-footer {
      display: flex;
      justify-content: center;
  }
  // ::v-deep .el-button + .el-button {
  //     color: #fff;
  // }
  // 弹框样式
  ::v-deep .el-dialog__body {
      max-height: 400px;
      overflow-y: auto;
  }
  // 滚动条样式
  ::v-deep .el-dialog__body::-webkit-scrollbar {
  // 滚动条整体样式
  width: 6px; //高宽分别对应横竖滚动条的尺寸
  height: 10px;
  }
  ::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
  // 滚动条里面小方块
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #f2f3f5;
  }
  ::v-deep .el-range-editor.el-input__inner {
      padding: 0px 10px;
  }

  .topBtn {
      text-align: center;
      padding: 20px;
  }
  .topBtnBox {
    display: inline-block;
  }
  ::v-deep .el-tag {
      border: none;
      color: #02A7F0;
      background-color: #FFFFFF;
  }
  ::v-deep .el-dialog__title {
      font-size: 14px;
      //font-weight: bold;
  }
  .TcoNewCss {
      border: none;
  }
  ::v-deep .el-collapse-item__wrap {
      border-bottom: none;
  }

  ::v-deep .el-dialog__body {
      padding: 20px;
  }
  ::v-deep .el-form-item .el-form-item__content {
    height: 100%
  }

  ::v-deep .el-collapse-item:last-child {
      margin-bottom: 1px;
  }

  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
        background-color: #f7f7f7;
    }

  .Colorred {
    color: red;
  }

  .container {
    .select {
      display: flex;
      align-items: center;
      .box {
        width: 100%;
        &:nth-child(n+2){
          margin-left: 10px;
        }
      }
      .title {
        width: 100%;
        height: 36px;
        line-height: 36px;
        text-align: left;
        font-size: 17px;
        font-weight: 900;
        // color: rgb(227, 47, 47);
        color: #eb4b4b;
      }
      .content {
        height: 250px;
        border: 1px solid #ccc;
        overflow: hidden;
        .node-item {
          height: 30px;
          line-height: 30px;
        //   text-align: left;
          text-indent: 1em;
          font-size: 12px;
          width: 100%;
          background-color: #DBDBDB;
          &:hover {
            cursor: pointer;
          }
          &.clicked {
            background-color: #ffefe5;
            color: #eb4b4b;
          }
        }
        .user-item {
          height: 22px;
          line-height: 22px;
        }
        .user-select-item {
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 12px;
          width: 100%;
          background-color: #F4F6F8;
        }
      }
      .icon {
        margin-right: 6px;
        font-size: 14px;
      }
      ::v-deep .el-icon-caret-right:before {
        content: ''
      }
    }
    .message {
      //margin-top: 10px;
      text-align: left;
    }
    .nextTips{
      margin-top: 5px;
      text-align: left;
    }
  }
  </style>
